﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Site.Master" AutoEventWireup="true" CodeBehind="TimeSheetCUBE.aspx.cs" Inherits="ONTS.WEB.Views.TimeSheetCUBE" %>

<%@ Register Src="~/UserControl/uc_UserInfo.ascx" TagPrefix="uc1" TagName="uc_UserInfo" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
    <script src="../js/Main.js"></script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">

     <!-- page specific plugin styles -->
    <link rel="stylesheet" href="../assets/css/jquery-ui.css" />
    <link rel="stylesheet" href="../assets/css/datepicker.css" />
    <link rel="stylesheet" href="../assets/css/ui.jqgrid.css" />

    <!-- ace styles -->
    <link rel="stylesheet" href="../assets/css/ace.css" class="ace-main-stylesheet" id="mainacestyle" />

    <!-- ace styles -->
    <link href="../css/Main.css" rel="stylesheet" />
    <!-- PAGE CONTENT BEGINS -->
 
    <form id="Form1" class="form-horizontal" role="form" runat="server">

        <div class="col-sm-12">
            <uc1:uc_UserInfo runat="server" ID="uc_UserInfo" />
            <div class="form-group">
                <label class="control-label col-xs-12 col-sm-1 no-padding-right">Date : </label>
                <div class="col-xs-12 col-sm-5 col-lg-2">
                    <asp:DropDownList ID="ddlDate" OnSelectedIndexChanged="ddlDate_SelectedIndexChanged" ClientIDMode="Static" runat="server" class="chosen-select form-control" data-placeholder="Choose a Date..."></asp:DropDownList>

                </div>
                 
            <div class="form-group">
                <label class="control-label col-xs-12 col-sm-1 no-padding-right">Holiday : </label>
                <asp:HiddenField ID="hdf_holidayID" runat="server" />
                <div class="col-xs-12 col-sm-5 col-lg-2">
                    <asp:TextBox ClientIDMode="Static" Width="200" ID="txtholiday" Text="-" runat="server"></asp:TextBox>
                </div>

            </div>


            <div class="form-group">
                <table id="grid-table"></table>

                <div id="grid-pager"></div>

            </div>

            <div class="form-group">
                <asp:Button Width="100px" class="btn btn-info" ID="BtnSaveData" OnClick="BtnSaveData_Click" runat="server" Text="Submit" />


                &nbsp; &nbsp; &nbsp;

         <asp:Button Width="100px" class="btn" ID="BtnReset" OnClick="BtnReset_Click" runat="server" Text="Reset" />

            </div>
        </div>
            </div>
    </form>


    <!-- PAGE CONTENT ENDS -->

    <!-- basic scripts -->
    <!--[if !IE]> -->
    <script type="text/javascript">
        window.jQuery || document.write("<script src='../assets/js/jquery.js'>" + "<" + "/script>");
    </script>

    <!-- <![endif]-->


    <!-- page specific plugin scripts -->
    <script src="../assets/js/date-time/bootstrap-datepicker.js"></script>
    <script src="../assets/js/jqGrid/jquery.jqGrid.src.js"></script>
    <script src="../assets/js/jqGrid/i18n/grid.locale-en.js"></script>

    <!-- inline scripts related to this page -->
    <script type="text/javascript">
        function GetUrlServiceTimeSheet(date) {
            var dt = $("#ddlDate").val();
            return '../Service/TimeSheetCubeService.ashx?date=' + dt;
        }
        $(document).ready(function () {

            $("#ddlDate").change(function () {
                // alert(this.value);
                $('#grid-table').setGridParam({ url: GetUrlServiceTimeSheet(this.value) }).trigger('reloadGrid');

                $.ajax({
                    type: "POST",
                    url: "TimeSheetBOT.aspx/isHoliday",
                    contentType: "application/json; charset=utf-8",
                    data: "{'date':'" + this.value + "'}",
                    dataType: "json",
                    success: function (response) {

                        $("#txtholiday").val(response.d);
                    },

                    failure: function (response) {
                        alert(response.d);
                    }
                });
            });
            if ($('#txtholiday').val() != "-") {

                $("#ddlLeave").prop("disabled", true);
            }
             
        });
        jQuery(function ($) {
            var grid_selector = "#grid-table";
            var pager_selector = "#grid-pager";

            //resize to fit page size
            $(window).on('resize.jqGrid', function () {
                $(grid_selector).jqGrid('setGridWidth', $(".page-content").width());
            })
            //resize on sidebar collapse/expand
            var parent_column = $(grid_selector).closest('[class*="col-"]');
            $(document).on('settings.ace.jqGrid', function (ev, event_name, collapsed) {
                if (event_name === 'sidebar_collapsed' || event_name === 'main_container_fixed') {
                    //setTimeout is for webkit only to give time for DOM changes and then redraw!!!
                    setTimeout(function () {
                        $(grid_selector).jqGrid('setGridWidth', parent_column.width());
                    }, 0);
                }
            })


            jQuery(grid_selector).jqGrid({

                url: GetUrlServiceTimeSheet($("#ddlDate").val()),
                datatype: "json",
                height: 250,
                colNames: ['Add/Edit', '', 'No.', 'Start Time', 'End Time', 'Leave Type', 'Leave Name','Leave Hour(s)', 'Work Hour(s)', 'Overtime','Job Code', 'Work Detail','Remark'],
                colModel: [
                    {
                        name: 'myac', index: '', width: 80, fixed: true, sortable: false, resize: false,
                        formatter: 'actions',
                        formatoptions: {

                            //delbutton: false,//disable delete button

                            delOptions: { recreateForm: true, beforeShowForm: beforeDeleteCallback },
                            editformbutton: true, editOptions: { width: 600, recreateForm: true, beforeShowForm: beforeEditCallback, closeAfterEdit: true }
                        }
                    },
                    { name: 'ID', index: 'ID', width: 50, sorttype: "int", editable: false, hidden: true, sortable: false },
                    { name: 'RowIndex', index: 'RowIndex', width: 50, sorttype: "int", editable: false, hidden: false, sortable: true },
                    {
                        name: 'START_TIME', index: 'START_TIME', width: 100, editable: true, edittype: "select",
                        editoptions: {
                            value: "8.00:8.00;9.00:9.00;10:10.00;11:11.00;12:12.00;13:13.00;14.00:14.00;15.00:15.00",
                            dataInit: function (elem) { $(elem).width(300).height(30); },
                            defaultValue: '9.00'
                        }
                    },
                    {
                        name: 'END_TIME', index: 'END_TIME', width: 100, editable: true, edittype: "select",
                        editoptions: {
                            value: "9.00:9.00;10:10.00;11.00:11.00;12.00:12.00;13.00:13.00;14.00:14.00;15.00:15.00;16.00:16.00;17.00:17.00;18.00:18.00",
                            dataInit: function (elem) { $(elem).width(300).height(30); },
                            defaultValue: '18.00'
                        }
                    },
                    {
                        name: 'LEAVE_ID', label: 'LEAVE_ID', index: 'LEAVE_NM', hidden: true,
                        width: 150, editable: true, edittype: "select", editrules: { edithidden: true },
                        editoptions: { visible: true, value: LeaveValues, dataInit: function (elem) { $(elem).width(300).height(30); } }
                    },
                    {
                        name: 'LEAVE_NM', index: 'LEAVE_NM', width: 100, editable: false, hidden: false
                    },
                    {
                        name: 'AMOUNT_OF_LEAVE', index: 'AMOUNT_OF_LEAVE', width: 100, editable: true
                        , edittype: "select",
                        editoptions: {
                            value: "0:0 Hrs;8:8 Hrs ;7:7 Hrs; 6:6 Hrs; 5:5 Hrs; 4:4 Hrs; 3:3 Hrs;2:2 Hrs;1:1 Hrs",
                            dataInit: function (elem) { $(elem).width(300).height(30); }
                        }
                    },
                    {
                        name: 'AMOUNT_OF_TIME', index: 'AMOUNT_OF_TIME', width: 100, editable: true
                        , edittype: "select",
                        editoptions: {
                            value: "8:8 Hrs;7:7 Hrs;6:6 Hrs;5:5 Hrs;4:4 Hrs;3:3 Hrs;2:2 Hrs;1:1 Hrs;0:0 Hrs",
                            dataInit: function (elem) { $(elem).width(300).height(30); }

                        }
                    },
                     {
                         name: 'AMOUNT_OF_TIME_OVER_TIME', index: 'AMOUNT_OF_TIME_OVER_TIME', width: 80, editable: true, edittype: "select",
                         editoptions: {
                             value: "0:0 Hrs;1:1 Hrs;2:2 Hrs;3:3 Hrs;4:4 Hrs;5:5 Hrs",
                             dataInit: function (elem) { $(elem).width(300).height(30); }
                         }
                     },
                     {
                         name: 'JOB_CODE', label: 'JOB_CODE', index: 'JOB_CODE', width: 200,
                         editable: true, sortable: false, editoptions: { dataInit: function (elem) { $(elem).width(300).height(30); } }
                     },
                    {
                        name: 'DETAIL', label: 'Descriptions', width: 400, index: 'DETAIL', editable: true, sortable: false, edittype: "textarea", editrules: { required: true },
                        editoptions: { rows: "2", cols: "20", dataInit: function (elem) { $(elem).width(300); } }
                    },
                    {
                        name: 'REMARK', label: 'REMARK', width: 200, index: 'REMARK', editable: true, sortable: false, edittype: "textarea",
                        editoptions: { rows: "2", cols: "20", dataInit: function (elem) { $(elem).width(300); } }
                    },

                ],

                viewrecords: true,
                rowNum: 10,
                height: 'auto', 
                pager: pager_selector,
                altRows: true, 
                jsonReader: { repeatitems: false, id: 'ID' }, 
                multiboxonly: true,
                gridview: true,
                loadComplete: function () {
                    var table = this;
                    setTimeout(function () {
                        styleCheckbox(table);

                        updateActionIcons(table);
                        updatePagerIcons(table);
                        enableTooltips(table);
                    }, 0);
                },

                editurl: GetUrlServiceTimeSheet($("#ddlDate").val()),//"../Service/TimeSheetBOTService.ashx?date=" + $("#ddlDate").val(),//nothing is saved
                caption: "List Timesheet CUBE"
            });
            $(window).triggerHandler('resize.jqGrid');//trigger window resize to make the grid get the correct size

            //enable datepicker
            function pickDate(cellvalue, options, cell) {
                setTimeout(function () {
                    $(cell).find('input[type=text]')
                            .datepicker({ format: 'yyyy-mm-dd', autoclose: true });
                }, 0);
            }

            //datepicker plugin
            //link
            $('.date-picker').datepicker({
                autoclose: true,
                todayHighlight: true
            })
            //show datepicker when clicking on the icon
            .next().on(ace.click_event, function () {
                $(this).prev().focus();
            });

            //navButtons
            jQuery(grid_selector).jqGrid('navGrid', pager_selector,
                { 	//navbar options
                    edit: false,
                    editicon: 'ace-icon fa fa-pencil blue',
                    add: true,
                    addicon: 'ace-icon fa fa-plus-circle purple',
                    del: false,
                    delicon: 'ace-icon fa fa-trash-o red',
                    search: false,
                    searchicon: 'ace-icon fa fa-search orange',
                    refresh: true,
                    refreshicon: 'ace-icon fa fa-refresh green',
                    view: false,
                    viewicon: 'ace-icon fa fa-search-plus grey',
                },
                {
                    //edit record form

                    //width: 600,
                    // closeAfterEdit: true,
                    recreateForm: true,
                    beforeShowForm: function (e) {
                        var form = $(e[0]);
                        form.closest('.ui-jqdialog').find('.ui-jqdialog-titlebar').wrapInner('<div class="widget-header" />')
                        style_edit_form(form);

                    }
                },
                {
                    //new record form

                    width: 600,
                    closeAfterAdd: true,
                    recreateForm: true,
                    viewPagerButtons: false,
                    beforeShowForm: function (e) {
                        var form = $(e[0]);
                        form.closest('.ui-jqdialog').find('.ui-jqdialog-titlebar')
                        .wrapInner('<div class="widget-header" />')
                        style_edit_form(form);
                    },
                    onclickSubmit: function (options, rowid) {
                        var rowData = $(this).jqGrid("getRowData", rowid);
                        options.url = GetUrlServiceTimeSheet($("#ddlDate").val());
                        return {}; // you can return additional data which will be sent to the server
                    }
                },
                {
                    //delete record form
                    recreateForm: true,
                    beforeShowForm: function (e) {
                        var form = $(e[0]);
                        if (form.data('styled')) return false;

                        form.closest('.ui-jqdialog').find('.ui-jqdialog-titlebar').wrapInner('<div class="widget-header" />')
                        style_delete_form(form);

                        form.data('styled', true);
                    },
                    onClick: function (e) {
                        //alert(1);
                    }
                },
                {
                    //search form
                    recreateForm: true,
                    afterShowSearch: function (e) {
                        var form = $(e[0]);
                        form.closest('.ui-jqdialog').find('.ui-jqdialog-title').wrap('<div class="widget-header" />')
                        style_search_form(form);
                    },
                    afterRedraw: function () {
                        style_search_filters($(this));
                    }
                    ,
                    multipleSearch: true,
                    /**
                    multipleGroup:true,
                    showQuery: true
                    */
                },
                {
                    //view record form
                    recreateForm: true,
                    beforeShowForm: function (e) {
                        var form = $(e[0]);
                        form.closest('.ui-jqdialog').find('.ui-jqdialog-title').wrap('<div class="widget-header" />')
                    }
                }
            )
            function GenEventDDL(start, end, s, e, result) {
                start.change(function () {
                    if (s < e) {
                        var r = e - s;
                        result.val(r);
                    }
                });
            }

            function style_edit_form(form) {
                //enable datepicker on "sdate" field and switches for "stock" field
                //update buttons classes
                form.find('select[name=LEAVE_ID]').change(function () {
                    var leaveVal = form.find('select[name=LEAVE_ID]').find(":selected").val();

                    if (leaveVal != 0) {
                        form.find('select[name=AMOUNT_OF_TIME]').val(0);
                        form.find('select[name=AMOUNT_OF_LEAVE]').val(1);
                        //form.find('select[name=START_TIME]').val('9.00');
                        //form.find('select[name=END_TIME]').val('18.00');
                    }
                    else { form.find('select[name=AMOUNT_OF_TIME]').val(8); form.find('select[name=AMOUNT_OF_LEAVE]').val(0); }

                });

                form.find('select[name=START_TIME]').change(function () {
                    var stime = form.find('select[name=START_TIME]').find(":selected").val();
                    var etime = form.find('select[name=END_TIME]').find(":selected").val();

                    var r = etime - stime;
                    if (stime < 12 && etime >= 13) {
                        r = r - 1;
                    }
                    form.find('select[name=AMOUNT_OF_TIME]').val(r);
                });

                form.find('select[name=END_TIME]').change(function () {
                    var stime = form.find('select[name=START_TIME]').find(":selected").val();
                    var etime = form.find('select[name=END_TIME]').find(":selected").val();
                    var r = etime - stime;
                    if (stime < 12 && etime >= 13) {
                        r = r - 1;
                    }
                    form.find('select[name=AMOUNT_OF_TIME]').val(r);
                });

                var buttons = form.next().find('.EditButton .fm-button');
                buttons.addClass('btn btn-sm').find('[class*="-icon"]').hide();//ui-icon, s-icon
                buttons.eq(0).addClass('btn-primary').prepend('<i class="ace-icon fa fa-check"></i>');
                buttons.eq(1).prepend('<i class="ace-icon fa fa-times"></i>')

                buttons = form.next().find('.navButton a');
                buttons.find('.ui-icon').hide();
                buttons.eq(0).append('<i class="ace-icon fa fa-chevron-left"></i>');
                buttons.eq(1).append('<i class="ace-icon fa fa-chevron-right"></i>');
            }

            function style_delete_form(form) {
                var buttons = form.next().find('.EditButton .fm-button');
                buttons.addClass('btn btn-sm btn-white btn-round').find('[class*="-icon"]').hide();//ui-icon, s-icon
                buttons.eq(0).addClass('btn-danger').prepend('<i class="ace-icon fa fa-trash-o"></i>');
                buttons.eq(1).addClass('btn-default').prepend('<i class="ace-icon fa fa-times"></i>')
            }

            function style_search_filters(form) {
                form.find('.delete-rule').val('X');
                form.find('.add-rule').addClass('btn btn-xs btn-primary');
                form.find('.add-group').addClass('btn btn-xs btn-success');
                form.find('.delete-group').addClass('btn btn-xs btn-danger');
            }
            function style_search_form(form) {
                var dialog = form.closest('.ui-jqdialog');
                var buttons = dialog.find('.EditTable')
                buttons.find('.EditButton a[id*="_reset"]').addClass('btn btn-sm btn-info').find('.ui-icon').attr('class', 'ace-icon fa fa-retweet');
                buttons.find('.EditButton a[id*="_query"]').addClass('btn btn-sm btn-inverse').find('.ui-icon').attr('class', 'ace-icon fa fa-comment-o');
                buttons.find('.EditButton a[id*="_search"]').addClass('btn btn-sm btn-purple').find('.ui-icon').attr('class', 'ace-icon fa fa-search');
            }

            function beforeDeleteCallback(e) {
                var form = $(e[0]);
                if (form.data('styled')) return false;

                form.closest('.ui-jqdialog').find('.ui-jqdialog-titlebar').wrapInner('<div class="widget-header" />')
                style_delete_form(form);

                form.data('styled', true);
            }

            function beforeEditCallback(e) {
                var form = $(e[0]);
                form.closest('.ui-jqdialog').find('.ui-jqdialog-titlebar').wrapInner('<div class="widget-header" />')
                style_edit_form(form);

            }
            //it causes some flicker when reloading or navigating grid
            //it may be possible to have some custom formatter to do this as the grid is being created to prevent this
            //or go back to default browser checkbox styles for the grid
            function styleCheckbox(table) {
                /**
                    $(table).find('input:checkbox').addClass('ace')
                    .wrap('<label />')
                    .after('<span class="lbl align-top" />')
            
            
                    $('.ui-jqgrid-labels th[id*="_cb"]:first-child')
                    .find('input.cbox[type=checkbox]').addClass('ace')
                    .wrap('<label />').after('<span class="lbl align-top" />');
                */
            }
            //unlike navButtons icons, action icons in rows seem to be hard-coded
            //you can change them like this in here if you want
            function updateActionIcons(table) {
                /**
                var replacement = 
                {
                    'ui-ace-icon fa fa-pencil' : 'ace-icon fa fa-pencil blue',
                    'ui-ace-icon fa fa-trash-o' : 'ace-icon fa fa-trash-o red',
                    'ui-icon-disk' : 'ace-icon fa fa-check green',
                    'ui-icon-cancel' : 'ace-icon fa fa-times red'
                };
                $(table).find('.ui-pg-div span.ui-icon').each(function(){
                    var icon = $(this);
                    var $class = $.trim(icon.attr('class').replace('ui-icon', ''));
                    if($class in replacement) icon.attr('class', 'ui-icon '+replacement[$class]);
                })
                */
            }

            //replace icons with FontAwesome icons like above
            function updatePagerIcons(table) {
                var replacement =
                {
                    'ui-icon-seek-first': 'ace-icon fa fa-angle-double-left bigger-140',
                    'ui-icon-seek-prev': 'ace-icon fa fa-angle-left bigger-140',
                    'ui-icon-seek-next': 'ace-icon fa fa-angle-right bigger-140',
                    'ui-icon-seek-end': 'ace-icon fa fa-angle-double-right bigger-140'
                };
                $('.ui-pg-table:not(.navtable) > tbody > tr > .ui-pg-button > .ui-icon').each(function () {
                    var icon = $(this);
                    var $class = $.trim(icon.attr('class').replace('ui-icon', ''));

                    if ($class in replacement) icon.attr('class', 'ui-icon ' + replacement[$class]);
                })
            }

            function enableTooltips(table) {
                $('.navtable .ui-pg-button').tooltip({ container: 'body' });
                $(table).find('.ui-pg-div').tooltip({ container: 'body' });
            }

            //var selr = jQuery(grid_selector).jqGrid('getGridParam','selrow');

            $(document).one('ajaxloadstart.page', function (e) {
                $(grid_selector).jqGrid('GridUnload');
                $('.ui-jqdialog').remove();
            });
        });
    </script>

</asp:Content>
